<!DOCTYPE html>
<html>
<head>
    <script src="../HtmlRunning/build/react.js"></script>
    <script src="../HtmlRunning/build/react-dom.js"></script>
    <script src="../HtmlRunning/build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    function ListItem(props) {
        // Correct! There is no need to specify the key here:
        return <li>{props.value}</li>;
    }

    function NumberList(props) {
        const numbers = props.numbers;
        const listItems = numbers.map((number) =>
                //<li key={number.toString()}>
                //{number}
                //</li>
                <ListItem key={number.toString()}
                            value={number} />
        );
        return (
                <ul>{listItems}</ul>
        );
    }




    const numbers = [1, 2, 3, 4, 5];
    const element = (<div>
                    <NumberList numbers={numbers} />
                    </div>);
    ReactDOM.render(
        element,
        document.getElementById('example')
    );

</script>
</body>
</html>

